/**
 * 一起学 mapbox !
 *
 * 课程7
 * 创建 popup 地图气泡
 *
 */

mapboxgl.accessToken = 'pk.eyJ1IjoiNGgzajgiLCJhIjoiY202cTRneXdpMDlheDJpb21rdGs2M3V6cSJ9.Ifg4pD0p8LxYmxmxwoTBNA';

const map = (window.map = new mapboxgl.Map({
  container: 'map',
  center: [121.74380266722233, 31.097567372835357],
  zoom: 10,
  style: 'mapbox://styles/mapbox/standard',
  minZoom: 10,
  maxZoom: 21
}));


const createPopup = (position) => {
  let prop ={
    closeOnClick: false,
    anchor: 'bottom'
  }
  if (window.popup) {
    window.popup.remove()
    window.popup = null
  }
  window.popup = new mapboxgl.Popup(prop)
    .setLngLat(position)
    .setHTML(`<h1>${position.join(',')}</h1>`)
    .addTo(map);
  console.log(popup)
  let div = document.createElement('div')
  div.innerHTML = '<h1>嘟嘟嘟!</h1><h2>嘟嘟嘟!</h2>'
  popup.setDOMContent(div)
}

const main = () => {
  createPopup()
}


map.on('click', ev => {
  console.log(ev)
  let lon = ev.lngLat.lng
  let lat = ev.lngLat.lat

  createPopup([lon, lat])
})

map.on('load', () => {
  main()
})
